
<template>
  <div>
    <div style="height: 60px;background-color: darkseagreen;width: 100vw;display:flex;">
      <span style="font-size: 50px;color:red;height: 100%;display:flex;align-items: center;margin-left: 700px">欢迎进入后台登录系统</span>
      <!-- 头部区域 -->
      <div style="flex: 1"></div>
      <div style="height: 100%;display: flex;align-items: center;margin-right: 100px">
        <span>黄琪琪</span>
        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.11hzv_skbfdaFBxwkTRVdAAAAA?w=201&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
             style="width:60px;height:60px;border-radius: 60px">
      </div>
    </div>
    <div style="width: 100vw;height: calc(100vh - 60px);display: flex;">
      
      <el-menu
          style="width: 200px;"
          class="el-menu-vertical-demo"
          router
          :default-active="activeMenu"
      >
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>系统首页
        </el-menu-item>
        <el-menu-item index="/manager/info" >
          <el-icon><ChatLineRound /></el-icon>信息管理
        </el-menu-item>
        <el-menu-item index="/manager/book">
          <el-icon><School /></el-icon>图书管理
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon><Location /></el-icon>
            <span>信息分类</span>
          </template>
          <el-menu-item index="/manager/book">学生列表</el-menu-item>
          <el-menu-item index="/manager/info">教师列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div style="height: 100%;flex: 1;padding: 20px;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { computed } from "vue";
import { Location, House, ChatLineRound, School } from "@element-plus/icons-vue";

const route = useRoute();

const activeMenu = computed(() => {
  return route.path;
});
</script>